<template>
  <div>
    <div class="box" @mousemove="mouseMove">
      <h2>当前鼠标的X坐标是---{{ clientX }}PX</h2>
      <h2>当前鼠标的X坐标是---{{ clientY }}PX</h2>
      <button @click="GetBeautyImg">获取美女图片</button>
      <a :href="imgUrl" :download="imgUrl">下载美女图片</a>
      <img :src="imgUrl" width="400" alt="" />
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<script setup lang="ts">
import getMouseMove from './hooks/useMouseMove';
import GetBeauty from './hooks/useGetBeauty';
// import { ref } from 'vue';

const { mouseMove, clientX, clientY } = getMouseMove();

const { GetBeautyImg, imgUrl } = GetBeauty();
</script>
<style>
.box {
  width: 1904px;
  height: 918px;
  border: 1px solid red;
}
</style>
